<template>
  <el-dialog
    title="题目预览"
    :visible="showPreview"
    width="70%"
    @close="closePreview"
  >
    <el-row class="previewrow">
      <div>【题型】：{{ detailData.questionType | filquestionType }}</div>
      <div>【编号】：{{ detailData.id }}</div>
      <div>【难度】：{{ detailData.difficulty | filterDifficulty }}</div>
      <div>【标签】：{{ detailData.tags }}</div>
      <div>【学科】：{{ detailData.subjectName }}</div>
      <div>【目录】：{{ detailData.directoryName }}</div>
      <div>【方向】：{{ detailData.direction }}</div>
    </el-row>
    <hr />
    <el-row>
      <div>【题干】:</div>
      <el-row>
        <span v-html="detailData.question"></span>
      </el-row>
      <el-row>
        {{ detailData.questionType | filquestionType }} 选项:
        (以下选中的选项为正确答案)
      </el-row>
      <slot name="preoptions"></slot>
      <!-- <el-radio-group v-model="isRight">
        <div v-for="item in options" :key="item.id">
          <el-radio :label="item.isRight">{{ item.title }}</el-radio>
        </div>
      </el-radio-group> -->

      <!-- <el-checkbox-group v-model="checkList">
            <div v-for="item in options" :key="item.id">
              <el-checkbox :label="item.title"></el-checkbox>
            </div>
          </el-checkbox-group> -->
    </el-row>
    <hr />
    <el-row type="flex" justify="flex-start">
      <span>【参考答案】：</span>
      <el-button type="danger" autoplay="autoplay" @click="videoAnwserPreview"
        >视频答案预览</el-button
      >
    </el-row>
    <el-row class="videoShow">
      <video
        :src="detailData.videoURL"
        width="400"
        height="300"
        controls="controls"
        v-show="showVideoAnwser"
        muted
        autoplay
      ></video>
    </el-row>
    <hr />
    <el-row type="flex" justify="flex-start">
      <span>【答案解析】：</span>
      <span v-html="detailData.answer"></span>
    </el-row>
    <hr />
    <el-row>
      <span>【题目备注】：</span> <span>{{ detailData.remarks }}</span>
    </el-row>
    <el-row type="flex" justify="end">
      <el-button type="primary" @click="closePreview">关闭</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { questionType as filquestionType, difficulty } from '@/api/hmmm/constants.js'
export default {
  name: 'filtratePreview',
  props: {
    showPreview: {
      type: Boolean,
      default: false
    },
    detailData: {
      type: Object
    },
    showVideoAnwser: {
      type: Boolean,
      default: false
    }

  },
  data () {
    return {

    }
  },
  created () {

  },
  filters: {
    filterDifficulty: function (val) {
      // console.log(val)
      if (val) {
        const difficultys = difficulty.filter(t => t.value === val * 1)
        // console.log(difficultys[0])
        return difficultys[0].label
      }
    },

    filquestionType: function (val) {
      if (val) {
        const type = filquestionType.filter(t => t.value === val * 1)
        // console.log(type)
        return type[0].label
      }
    }
  },
  methods: {

    closePreview () {
      // 关闭弹框
      this.$parent.closePreview()
    },
    // 点击显示video
    videoAnwserPreview () {
      this.$parent.openVideo()
    }
  },
  computed: {},
  watch: {},
  components: {}
}
</script>

<style lang="scss" scoped>
.previewrow {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  height: 100px;
  flex-wrap: wrap;

  div {
    width: 25%;
  }
}
</style>
